const { Configuration } = require("webpack")
const path = require("node:path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { VueLoaderPlugin } = require("vue-loader")
const CssExtractPlugin = require("mini-css-extract-plugin")

/**
  * @type {Configuration}
*/

const config = {
  mode: "development", // 开发模式
  entry: "./src/main.ts", // 入口文件
  output: {
    path: path.resolve(__dirname, "dist"), // 输出文件夹
    // filename: "bundle.js", // 打包之后的文件  输出文件名
    filename: "[chunkhash].js", // 打包之后的文件  输出文件名 避免重复
    clean: true // 清空输出文件夹
  },
  stats: "errors-only", // 打包过程中只显示错误信息
  plugins: [
    // webpack的插件都是class 都需要new
    new HtmlWebpackPlugin({
      template: "./index.html", // 模板文件
    }),
    new VueLoaderPlugin(),
    new CssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        // test: /\.ts$/, // 匹配的文件类型
        // use: "ts-loader", // 解析ts文件 loader
        // exclude: /node_modules/, // 不处理node_modules文件夹下的文件
        // options: {
        //   transpileOnly: true // 只编译不转换
        // }
        test: /\.ts$/,
        loader: "ts-loader",
        options: { 
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"]
      },
      {
        test: /\.css$/,
        // use: ["style-loader", "css-loader"] // 从右往左的规则，然后js动态插入style标签
        use: [CssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/,
        // use: ["style-loader", "css-loader", "less-loader"]
        use: [CssExtractPlugin.loader, "css-loader", "less-loader"]
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        moment: {
          name: "moment",
          chunks: "all",
          test: /[\\/]node_modules[\\/]moment[\\/]/,
        },
        common: {
          name: "common",
          chunks: "all",
          minChunks: 2  // 文件被引用的次数最少为2次
        }
      }
    }
  }
}

module.exports = config